Zajemanje dogodkov v React Portalih: Prestrezanje dogodkov med portali

React Portali ponujajo močan mehanizem za upodabljanje otrok v DOM vozlišče, ki obstaja zunaj DOM hierarhije starševske komponente. To je še posebej uporabno za modale, namige (tooltips) in druge elemente uporabniškega vmesnika, ki morajo uiti omejitvam svojih starševskih vsebnkov. Vendar to prinaša tudi zaplete pri obravnavi dogodkov, še posebej, ko morate prestreči ali zajeti dogodke, ki izvirajo znotraj portala, a so namenjeni elementom zunaj njega. Ta članek raziskuje te zaplete in ponuja praktične rešitve za doseganje prestrezanja dogodkov med portali.

Razumevanje React Portalov

Preden se poglobimo v zajemanje dogodkov, si utrdimo razumevanje React Portalov. Portal omogoča upodabljanje otroške komponente v drugem delu DOM-a. Predstavljajte si, da imate globoko ugnezdeno komponento in želite modal upodobiti neposredno pod elementom `body`. Brez portala bi bil modal podvržen stiliranju in pozicioniranju svojih prednikov, kar bi lahko vodilo do težav z postavitvijo. Portal to zaobide tako, da modal postavi neposredno tja, kamor želite.

Osnovna sintaksa za ustvarjanje portala je:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Tukaj je `child` React element (ali komponenta), ki jo želite upodobiti, in `domNode` je DOM vozlišče, kamor jo želite upodobiti.

Primer:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Obravnavaj primer, ko modal-root ne obstaja

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

V tem primeru komponenta `Modal` upodobi svoje otroke v DOM vozlišče z ID-jem `modal-root`. Upravljalnik `onClick` na `.modal-overlay` omogoča zapiranje modala s klikom zunaj vsebine, medtem ko `e.stopPropagation()` prepreči, da bi klik na prekrivno plast zaprl modal, ko kliknemo na vsebino.

Izziv obravnave dogodkov med portali

Čeprav portali rešujejo težave s postavitvijo, prinašajo izzive pri obravnavi dogodkov. Natančneje, standardni mehanizem lebdenja dogodkov (event bubbling) v DOM-u se lahko obnaša nepričakovano, ko dogodki izvirajo znotraj portala.

Scenarij: Predstavljajte si scenarij, kjer imate gumb znotraj portala in želite slediti klikom na ta gumb iz komponente, ki je višje v React drevesu (vendar *zunaj* lokacije upodabljanja portala). Ker portal prekine hierarhijo DOM-a, dogodek morda ne bo lebdel navzgor do pričakovane starševske komponente v React drevesu.

Ključne težave:

• Lebdenje dogodkov (Event Bubbling): Dogodki se širijo navzgor po DOM drevesu, vendar portal ustvari prekinitev v tem drevesu. Dogodek lebdi navzgor po hierarhiji DOM-a *znotraj* ciljnega vozlišča portala, vendar ne nujno nazaj do React komponente, ki je ustvarila portal.
• `stopPropagation()`: Čeprav je v mnogih primerih uporabna, lahko neselektivna uporaba `stopPropagation()` prepreči, da bi dogodki dosegli potrebne poslušalce, vključno s tistimi zunaj portala.
• Cilj dogodka (Event Target): Lastnost `event.target` še vedno kaže na DOM element, kjer je dogodek nastal, tudi če je ta element znotraj portala.

Strategije za prestrezanje dogodkov med portali

Uporabiti je mogoče več strategij za obravnavo dogodkov, ki izvirajo znotraj portalov in dosežejo komponente zunaj njih:

1. Delegiranje dogodkov (Event Delegation)

Delegiranje dogodkov vključuje pripenjanje enega samega poslušalca dogodkov na starševski element (pogosto dokument ali skupni prednik) in nato določanje dejanskega cilja dogodka. Ta pristop se izogne pripenjanju številnih poslušalcev dogodkov na posamezne elemente, kar izboljša delovanje in poenostavi upravljanje dogodkov.

Kako deluje:

1. Pripnite poslušalca dogodkov na skupnega prednika (npr. `document.body`).
2. V poslušalcu dogodkov preverite lastnost `event.target`, da ugotovite, kateri element je sprožil dogodek.
3. Izvedite želeno dejanje glede na cilj dogodka.

Primer:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Gumb znotraj portala kliknjen!', event.target);
        // Izvedi dejanja glede na kliknjen gumb
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>To je komponenta zunaj portala.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

V tem primeru `PortalAwareComponent` pripne poslušalca klikov na `document.body`. Poslušalec preveri, ali ima kliknjen element razred `portal-button`. Če ga ima, zapiše sporočilo v konzolo in izvede vsa druga potrebna dejanja. Ta pristop deluje ne glede na to, ali je gumb znotraj ali zunaj portala.

Prednosti:

• Učinkovitost: Zmanjša število poslušalcev dogodkov.
• Enostavnost: Centralizira logiko obravnave dogodkov.
• Prilagodljivost: Enostavno obravnava dogodke iz dinamično dodanih elementov.

Premisleki:

• Specifičnost: Zahteva skrbno ciljanje izvorov dogodkov z uporabo `event.target` in potencialno prečkanje DOM drevesa navzgor z `event.target.closest()`.
• Tip dogodka: Najbolje primerno za dogodke, ki lebdijo (bubble).

2. Proženje dogodkov po meri (Custom Event Dispatching)

Dogodki po meri omogočajo programsko ustvarjanje in proženje dogodkov. To je uporabno, ko morate komunicirati med komponentami, ki niso neposredno povezane v React drevesu, ali ko morate sprožiti dogodke na podlagi logike po meri.

Kako deluje:

1. Ustvarite nov objekt `Event` z uporabo konstruktorja `Event`.
2. Sprožite dogodek z metodo `dispatchEvent` na DOM elementu.
3. Poslušajte dogodek po meri z uporabo `addEventListener`.

Primer:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Gumb kliknjen znotraj portala!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Klikni me (znotraj portala)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>To je komponenta zunaj portala.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

V tem primeru, ko je kliknjen gumb znotraj portala, se na `document` sproži dogodek po meri z imenom `portalButtonClick`. Komponenta `PortalAwareComponent` posluša ta dogodek in zapiše sporočilo v konzolo.

Prednosti:

• Prilagodljivost: Omogoča komunikacijo med komponentami ne glede na njihov položaj v React drevesu.
• Prilagodljivost po meri: V lastnost `detail` dogodka lahko vključite podatke po meri.
• Razdvojitev (Decoupling): Zmanjša odvisnosti med komponentami.

Premisleki:

• Poimenovanje dogodkov: Izberite edinstvena in opisna imena dogodkov, da se izognete konfliktom.
• Serializacija podatkov: Zagotovite, da so vsi podatki, vključeni v lastnost `detail`, serializabilni.
• Globalni obseg: Dogodki, sproženi na `document`, so globalno dostopni, kar je lahko tako prednost kot potencialna slabost.

3. Uporaba referenc (Refs) in neposredne manipulacije DOM-a (uporabljajte previdno)

Čeprav se v razvoju z Reactom na splošno odsvetuje, je neposreden dostop in manipulacija DOM-a z uporabo referenc (refs) včasih nujna za kompleksne scenarije obravnave dogodkov. Vendar je ključnega pomena, da se neposredna manipulacija DOM-a zmanjša na minimum in se, kadar koli je to mogoče, da prednost deklarativnemu pristopu Reacta.

Kako deluje:

1. Ustvarite referenco (ref) z uporabo `React.createRef()` ali `useRef()`.
2. Pripnite referenco na DOM element znotraj portala.
3. Dostopajte do DOM elementa z uporabo `ref.current`.
4. Pripnite poslušalce dogodkov neposredno na DOM element.

Primer:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Gumb kliknjen (neposredna manipulacija DOM-a)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Klikni me (znotraj portala)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>To je komponenta zunaj portala.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

V tem primeru je referenca pripeta na gumb znotraj portala. An event listener is then directly attached to the button's DOM element using `buttonRef.current.addEventListener()`. Ta pristop obide Reactov sistem dogodkov in omogoča neposreden nadzor nad obravnavo dogodkov.

Prednosti:

• Neposreden nadzor: Omogoča natančen nadzor nad obravnavo dogodkov.
• Obhod Reactovega sistema dogodkov: Lahko je uporabno v specifičnih primerih, ko Reactov sistem dogodkov ne zadostuje.

Premisleki:

• Možnost konfliktov: Lahko povzroči konflikte z Reactovim sistemom dogodkov, če se ne uporablja previdno.
• Kompleksnost vzdrževanja: Koda postane težja za vzdrževanje in razumevanje.
• Anti-vzorec: Pogosto se šteje za anti-vzorec v razvoju z Reactom. Uporabljajte redko in samo, kadar je to nujno potrebno.

4. Uporaba rešitve za upravljanje deljenega stanja (npr. Redux, Zustand, Context API)

Če morajo komponente znotraj in zunaj portala deliti stanje in se odzivati na iste dogodke, je lahko rešitev za upravljanje deljenega stanja čist in učinkovit pristop.

Kako deluje:

1. Ustvarite deljeno stanje z uporabo Reduxa, Zustanda ali Reactovega Context API-ja.
2. Komponente znotraj portala lahko prožijo akcije ali posodabljajo deljeno stanje.
3. Komponente zunaj portala se lahko naročijo na deljeno stanje in se odzivajo na spremembe.

Primer (z uporabo React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext mora biti uporabljen znotraj EventProviderja');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Klikni me (znotraj portala)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>To je komponenta zunaj portala. Gumb kliknjen: {buttonClicked ? 'Da' : 'Ne'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

V tem primeru `EventContext` zagotavlja deljeno stanje (`buttonClicked`) in upravljalnik (`handleButtonClick`). Komponenta `PortalContent` pokliče `handleButtonClick`, ko je gumb kliknjen, komponenta `PortalAwareComponent` pa se naroči na stanje `buttonClicked` in se ponovno upodobi, ko se to spremeni.

Prednosti:

• Centralizirano upravljanje stanja: Poenostavlja upravljanje stanja in komunikacijo med komponentami.
• Predvidljiv pretok podatkov: Zagotavlja jasen in predvidljiv pretok podatkov.
• Testabilnost: Omogoča lažje testiranje kode.

Premisleki:

• Dodatna obremenitev: Dodajanje rešitve za upravljanje stanja lahko povzroči dodatno obremenitev, še posebej pri preprostih aplikacijah.
• Krivulja učenja: Zahteva učenje in razumevanje izbrane knjižnice za upravljanje stanja ali API-ja.

Najboljše prakse za obravnavo dogodkov med portali

Pri obravnavi dogodkov med portali upoštevajte naslednje najboljše prakse:

• Zmanjšajte neposredno manipulacijo DOM-a: Kadar koli je mogoče, dajte prednost deklarativnemu pristopu Reacta. Izogibajte se neposredni manipulaciji DOM-a, razen če je to nujno potrebno.
• Uporabljajte delegiranje dogodkov pametno: Delegiranje dogodkov je lahko močno orodje, vendar pazljivo ciljajte izvore dogodkov.
• Razmislite o dogodkih po meri: Dogodki po meri lahko zagotovijo prilagodljiv in razdvojen način komunikacije med komponentami.
• Izberite pravo rešitev za upravljanje stanja: Če morajo komponente deliti stanje, izberite rešitev za upravljanje stanja, ki ustreza kompleksnosti vaše aplikacije.
• Temeljito testiranje: Temeljito preizkusite svojo logiko obravnave dogodkov, da zagotovite, da deluje po pričakovanjih v vseh scenarijih. Posebno pozornost namenite robnim primerom in morebitnim konfliktom z drugimi poslušalci dogodkov.
• Dokumentirajte svojo kodo: Jasno dokumentirajte svojo logiko obravnave dogodkov, še posebej pri uporabi kompleksnih tehnik ali neposredne manipulacije DOM-a.

Zaključek

React Portali ponujajo močan način za upravljanje elementov uporabniškega vmesnika, ki morajo uiti mejam svojih starševskih komponent. Vendar pa obravnava dogodkov med portali zahteva skrben premislek in uporabo ustreznih tehnik. Z razumevanjem izzivov in uporabo strategij, kot so delegiranje dogodkov, dogodki po meri in upravljanje deljenega stanja, lahko učinkovito prestrežete in zajamete dogodke, ki izvirajo znotraj portalov, ter zagotovite, da vaša aplikacija deluje po pričakovanjih. Ne pozabite dati prednosti deklarativnemu pristopu Reacta in zmanjšati neposredno manipulacijo DOM-a, da ohranite čisto, vzdržljivo in testabilno kodo.